<template>
  <dt-modal-edit ref="editRef" title="项目转交" @ok="onOk" @cancelData="cancelData">
    <div class="topBox">
      <span>
        <Icon style="vertical-align: -8px" size="30" color="#2D61F4" type="ios-list-box-outline" />
        {{ editInfo.tenantName }}（编号：{{ editInfo.tenantCode }}）- {{ editInfo.tenantStatusName }}
      </span>
    </div>
    <div class="tips">
      <Icon type="ios-alert" color="#2D61F4" class="tips_icon" />
      您可将该项目转交至其他人员。
      <span>转交后，原所属人的“超级管理员”权限将转交至新所属人并被赋予管理员权限，</span>
      请谨慎操作
    </div>
    <div>
      <dt-info :label-width="120" ref="proInfo"></dt-info>
      <div class="tips" v-if="tipsFlag">
        <Icon type="ios-alert" color="#2D61F4" class="tips_icon" />
        该手机号为已注册手机号 ，
        <span>请确认人员名称是否一致。</span>
        您可对人员名称进行修改，修改后人员名称将仅在当前项目（组织）中生效
      </div>

      <h3 class="title">变更说明</h3>
      <Input
        v-model="editInfo.changeDescription"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入说明..." />
    </div>
    <Modal v-model="showModal" title="验证手机号" width="30%" @on-ok="checkOk" class="audio-modal">
      <p v-if="userPhoneVal.existsItem == 1">
        该手机号所属人人员为当前项目在案人员： {{ userPhoneVal.userName }}({{ userPhoneVal.workNumber }})。
        <br />
        <span style="color: #2d8cf0; cursor: pointer" @click="zpeople(true)">查看人员信息</span>
        请确认，是否以该人员作为项目归属人？
      </p>
      <p v-else>
        该手机号为已注册手机号， 注册人员：{{ userPhoneVal.userName }}({{ userPhoneVal.workNumber }})。
        <br />
        <span style="color: #2d8cf0; cursor: pointer" @click="zpeople">查看人员所属组织</span>
        请确认，是否以该人员作为项目归属人？
      </p>
    </Modal>
    <belong-user-org ref="belongUserOrgRef"></belong-user-org>
    <Modal
      v-model="tranFlag"
      title="项目转交"
      width="30%"
      :footer-hide="true"
      @on-ok="tranOk"
      class="audio-modal">
      <p>项目转交后，项目的“剩余账号数”为：{{ num }}个，请及时联系租户对项目成员进行移除操作</p>
      <div class="footer">
        <Button @click="tranOk" type="primary">知道了</Button>
      </div>
    </Modal>
  </dt-modal-edit>
</template>

<script setup>
  import { ref } from 'vue'
  import dt from '@dt/dt'
  import { editOpt } from '../biz/proTransferOpt'
  import belongUserOrg from './belongUserOrg.vue'
  import apiMgr from '../biz/index.js'
  const proInfo = ref()
  const editInfo = ref({
    tenantName: '',
    tenantCode: '',
    tenantStatusName: '',
    lastBelongUserPhone: null,
    belongUserPhone: null,
    phoneVerify: null,
    belongUserName: '',
    lastBelongUserName: '',
    changeDescription: ''
  })

  const emits = defineEmits(['successful'])
  const userPhoneVal = ref({})
  const num = ref()
  const tranFlag = ref(false)
  const onOk = () => {
    proInfo.value.validate().then((res) => {
      if (res) {
        dt.ui.Modal.confirm({
          title: '确认',
          content: ` 请确认，是否对项目“${editInfo.value.tenantName}”执行转交操作？<br/>项目转交后，项目所属人将从“${editInfo.value.lastBelongUserName}”变更为“${editInfo.value.belongUserName}”`,
          onOk: () => {
            let params = {
              tenantId: editInfo.value.id,
              belongUserPhone: editInfo.value.belongUserPhone,
              belongUserName: editInfo.value.belongUserName,
              changeDescription: editInfo.value.changeDescription,
              changeType: 1
            }
            apiMgr.changeTenantForWeb(params).then((res) => {
              num.value = res
              tranFlag.value = true
            })
          },
          onCancel: () => {
            dt.ui.Message.info('您取消了操作。')
          }
        })
      }
    })
  }
  const tranOk = () => {
    tranFlag.value = false
    emits('successful')
  }
  const tipsFlag = ref(false)
  const fun = {
    checkPhone: () => {
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!reg.test(editInfo.value.belongUserPhone)) {
        return dt.ui.Message.warning('请输入正确的手机号')
      } else {
        let params = {
          phone: editInfo.value.belongUserPhone
        }
        apiMgr.getTenantInfoByPhoneForWeb(params).then((res) => {
          userPhoneVal.value = res
          console.log(res, 'res')
          if (!res.registerStatus) {
            dt.ui.Modal.confirm({
              title: '验证手机号',
              content: `该手机号为未注册手机号。<br/>请确认，是否以该手机号作为归属人手机号并创建新用户?`,
              onOk: () => {
                console.log(userPhoneVal.value, 'vvv')
                editInfo.value.phoneVerify = editInfo.value.belongUserPhone
                editInfo.value.belongUserName = userPhoneVal.value.userName
                if (editInfo.value.belongUserName && userPhoneVal.value.registerStatus == 1) {
                  tipsFlag.value = true
                } else {
                  tipsFlag.value = false
                }
              },
              onCancel: () => {
                dt.ui.Message.info('您取消了操作。')
              }
            })
          } else {
            showModal.value = true
          }
        })
      }
    }
  }
  const belongUserOrgRef = ref()
  function zpeople(val) {
    belongUserOrgRef.value.show(userPhoneVal.value, val)
  }
  function checkOk() {
    console.log(userPhoneVal.value, '确认')
    editInfo.value.phoneVerify = userPhoneVal.value.phone
    editInfo.value.belongUserName = userPhoneVal.value.userName

    if (editInfo.value.belongUserName && userPhoneVal.value.registerStatus == 1) {
      tipsFlag.value = true
    } else {
      tipsFlag.value = false
    }
  }
  const editRef = ref()
  const cancelData = () => {
    editInfo.value = {
      tenantName: '',
      tenantCode: '',
      tenantStatusName: '',
      lastBelongUserPhone: null,
      belongUserPhone: null,
      phoneVerify: null,
      belongUserName: '',
      lastBelongUserName: '',
      remark: ''
    }
  }
  const hide = () => editRef.value.hide()

  const show = (val) => {
    console.log(val, 'dddd')
    editInfo.value.lastBelongUserPhone = val.belongUserPhone
    editInfo.value.lastBelongUserName = val.belongUserName
    editInfo.value.tenantName = val.tenantName
    editInfo.value.tenantCode = val.tenantCode
    editInfo.value.tenantStatusName = val.tenantStatusName
    editInfo.value.id = val.id
    editRef.value.show()
    proInfo.value.init(new editOpt(fun), editInfo.value)
  }
  const showModal = ref(false)
  defineExpose({
    show,
    hide
  })
</script>

<style lang="scss" scoped>
  .topBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px #ccc solid;
    background: #f7f4f4;
    padding: 20px 20px;
    line-height: 30px;
    font-size: 16px;
  }
  .tips {
    padding: 5px 10px;
    line-height: 1.4;
    font-size: 14px;
    background: rgba(254, 252, 236, 1);
    margin: 10px;

    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }
  .title {
    position: relative;
    padding-left: 16px;
    margin: 10px 0;
  }
  .title::before {
    content: '';
    width: 8px;
    height: 16px;
    background: #2d61f4;
    position: absolute;
    left: 0;
    top: 4px;
  }
  .formBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap; /* 设置换行 */
    > * {
      width: 49%;
    }
  }
  .footer {
    margin-top: 10px;
    text-align: right;
  }
</style>
